<template>
  <section class="container">
    <collectPlugin/>
    <a-layout-header>
      <top-nav-bar />
    </a-layout-header>
    <div class="nav-content">
      <side-menu />
      <a-layout-content class="layout-content">
        <global-tabs />
        <route-view></route-view>
        <bottom-footer />
      </a-layout-content>
    </div>
  </section>
</template>

<script lang="ts" setup>
import TopNavBar from "@/layouts/TopNavBar.vue";
import SideMenu from "@/layouts/SideMenu.vue";
import BottomFooter from "@/layouts/BottomFooter.vue";
import RouteView from "@/layouts/RouteView.vue";
import globalTabs from "@/components/globalRouterTabs/index.vue";
import collectPlugin from "@/components/plugin/CollectPlugin.vue"
</script>

<style lang="less" scoped="scoped">
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: #f7f8fa;

  .nav-content {
    flex: 1;
    display: flex;
    overflow-y: hidden;

    .layout-content {
      height: 100%;
      margin: 20px 20px 24px;
      overflow: hidden;
      width: min-content;
      flex: 1;
    }
  }
}

.ant-layout-header {
  height: 60px;
  background-color: #fff;
  padding: 0;
  line-height: 60px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
  z-index: 2;
}
</style>
